<template>
  <div :class="{ shade: shade }">
    <div class="login-wrapper" v-show="show">
      <div class="content-box">
        <div class="close-btn">
          <img @click="closeFn" src="../assets/img/close.png" alt="" />
        </div>
        <div class="loginway">
          <span
            :class="{ active: showForm }"
            class="phone-login"
            @click="showPhoneForm"
            >手机号码登录</span
          >
          <span class="fengefu"> | </span>
          <span
            :class="{ active: !showForm }"
            class="wechat-login"
            @click="showWechatQRcode"
            >微信扫码登录</span
          >
        </div>
        <!-- 手机号码登录 -->
        <div class="phone_login" v-show="showForm">
          <div class="phonenumber">
            <input
              type="text"
              placeholder="请输入手机号"
              v-model="phonenumber"
            />
          </div>
          <div class="slide_verify">
            <slide-verify
              :l="42"
              :r="10"
              :w="360"
              :h="155"
              slider-text="向右滑动"
              @success="onSuccess"
              @fail="onFail"
              @refresh="onRefresh"
              class="slide-box"
              ref="slideVerify"
            ></slide-verify>
          </div>
          <div class="identifying-code">
            <input
              type="text"
              placeholder="请输入短信验证码"
              v-model="identifyingCode"
            />
            <span v-if="showCode" @click="getIdentifyingCode">获取验证码</span>
            <span v-else>{{ count }}s</span>
          </div>
          <div class="login-btn" @click="loginFn">登录</div>
        </div>
        <!-- 微信扫码登录 -->
        <div class="wxqrcode_login" v-show="!showForm" id="weixin"></div>
      </div>
      <div class="bottom-box"></div>
    </div>
  </div>
</template>

<script>
import bus from "../bus";
import { sendSMS, phoneRegin, getUserProfiles } from "../request/httpApi";

export default {
  data() {
    return {
      shade: false, // 控制页面是否灰度
      show: false, // 控制登录框显示隐藏
      phonenumber: "", // 输入框手机号
      identifyingCode: "", // 输入框验证码
      slideSuc: true, // 代表滑块验证是否成功
      showCode: true, // 显示获取验证码按钮
      count: 60, // 倒计时时间
      timer: null, // 定时器
      showForm: true, // 控制手机登录or扫码登录
    };
  },
  created() {
    // 显示登录框
    bus.$on("loginshow", bool => {
      this.show = bool;
      this.shade = true;
    });
  },
  methods: {
    // 关闭登录框
    closeFn() {
      this.show = false;
      // 重置输入框内所有的内容
      this.phonenumber = "";
      this.identifyingCode = "";
      this.$refs.slideVerify.reset();
      this.shade = false;
      clearInterval(this.timer);
      this.showCode = true; // 将按钮显示为获取验证码
      this.count = 60;
    },
    // 登录框内的登录按钮
    loginFn() {
      if (this.toVertify() && this.identifyingCode.length === 4) {
        // 通过校验，发送请求以验证手机号和验证码是否匹配
        phoneRegin({
          verifyCode: this.identifyingCode,
          phone: this.phonenumber,
        }).then(res => {
          if (res.code === 0) {
            localStorage.setItem("token", res["x-auth-token"]);
            // 通过Vuex封装的方法发送请求获取该用户的信息
            this.$store.dispatch("getUserInfo").then(res => {
              this.closeFn();
              // 调用这个弹出框
              this.$toast({
                message: "登录成功",
                type: "success",
                duration: 2000, // 显示的时长
              });
            });
          }
        });
      }
    },
    // 验证电话输入框和滑块
    toVertify() {
      const reg = /^1[3-9]\d{9}$/;
      if (!reg.test(this.phonenumber)) {
        this.$toast({
          message: "手机号码格式错误",
          type: "fail",
        });
        return;
      } else if (!this.slideSuc) {
        this.$toast({
          message: "请按要求滑动滑块",
          type: "fail",
        });
        return;
      } else {
        return true;
      }
    },
    // 滑块验证通过
    onSuccess() {
      this.slideSuc = true;
    },
    // 滑块验证失败
    onFail() {
      this.slideSuc = false;
    },
    // 滑块刷新按钮
    onRefresh() {
      console.log("刷新");
      this.slideSuc = false;
    },
    // 点击获取验证码按钮
    getIdentifyingCode() {
      // 验证电话输入框和滑块
      if (this.toVertify() && this.showCode) {
        // 通过校验，获取验证码
        this.showCode = false; // 将按钮显示为倒计时
        this.timer = setInterval(() => {
          if (this.count > 1) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.showCode = true; // 将按钮显示为获取验证码
            this.count = 60;
          }
        }, 1000);
        // 发送网络请求获取验证码
        sendSMS({
          phone: this.phonenumber,
        }).then(res => {});
      }
    },
    // 显示手机登录
    showPhoneForm() {
      this.showForm = true;
    },
    // 显示微信扫码登录
    showWechatQRcode() {
      this.showForm = false;
      // 微信登录第一步：申请微信登录二维码
      let _this = this;
      new WxLogin({
        id: "weixin",
        appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
        scope: "snsapi_login",
        // 扫码成功后重定向的接口
        redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
        // state填写编码后的url
        state: encodeURIComponent(
          window.btoa("http://127.0.0.1:8080" + _this.$route.path)
        ),
        // 调用样式文件
        href: "data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlLCAuaW1wb3dlckJveCAuaW5mb3sNCiAgICBkaXNwbGF5OiBub25lOw0KfQ0KDQouaW1wb3dlckJveCAucXJjb2Rlew0KICAgIG1hcmdpbi10b3A6IDIwcHg7DQp9",
      });
    },
  },
};
</script>

<style lang="less" scoped>
// 遮罩层
.shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

.login-wrapper {
  position: fixed;
  width: 555px;
  height: 423px;
  left: 50%;
  top: 50%;
  margin-left: -277px;
  margin-top: -211px;
  .content-box {
    width: 80%;
    height: 400px;
    margin: 0 auto;
    background: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-align: center;
    .close-btn {
      margin-right: -370px;
      padding-top: 13px;
      cursor: pointer;
    }
    .loginway {
      margin: 10px 0 10px 0;
      font-size: 16px;
      .phone-login {
        margin-right: 5px;
        color: #999;
        cursor: pointer;
      }
      .fengefu {
        color: #999;
      }
      .wechat-login {
        margin-left: 5px;
        color: #999;
        cursor: pointer;
      }
    }
    .phonenumber {
      width: 360px;
      height: 50px;
      text-align: center;
      margin: 20px auto;
      input {
        width: 350px;
        height: 100%;
        padding-left: 10px;
        font-size: 14px;
        outline: none;
        border: 1px solid #d2d2d2;
      }
    }
    .slide_verify {
      width: 360px;
      height: 40px;
      line-height: 40px;
      margin: 0 auto;
      background: #fff;
    }
    .identifying-code {
      margin: 20px auto;
      width: 360px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      input {
        padding-left: 10px;
        width: 252px;
        height: 48px;
        outline: none;
        border: 1px solid #d2d2d2;
      }
      span {
        display: block;
        width: 90px;
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        background: #e8e8e8;
        cursor: pointer;
      }
    }
    .login-btn {
      margin: 0 auto;
      width: 360px;
      height: 50px;
      line-height: 50px;
      background-color: #0a328e;
      color: #fff;
      font-size: 18px;
      cursor: pointer;
    }
  }
  .bottom-box {
    height: 23px;
    width: 100%;
    background: #e3eaf6;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
}

.active {
  color: #000 !important;
  font-weight: 600;
  cursor: default !important;
}

/deep/ .slide-box {
  position: relative;
  canvas {
    position: absolute;
    top: -150px;
    display: none;
  }
  .slide-verify-refresh-icon {
    display: none;
    top: -145px;
    right: 10px;
  }
  &:hover {
    canvas {
      display: block;
    }
    .slide-verify-refresh-icon {
      display: block;
    }
  }
}
</style>
